<template>
  <div>
    <h1>Home</h1>
    <el-row>
      <el-col :span="8">
        <el-card class="box-card">
          <div class="user">
            <img src="@/assets/baobao.jpg" alt="" />
            <!-- <img src="@/assets/logo.png" alt="" /> -->
            <div class="userinfo">
              <p class="name">{{ adminName }}</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>
              最近访问时间:<span>{{ dailySales[0].value }}</span>
            </p>
            <p>上次登录地点:<span>福州</span></p>
          </div>
        </el-card>
        <el-card>
          <el-table
            :data="todaySalesTable"
            stripe
            style="width: 100%; margin-top: 20px; height: 460px"
          >
            <el-table-column
              v-for="(val, key) in tableLabel"
              :key="key"
              :prop="key"
              :label="val"
            />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16" style="padding-left: 10px">
        <div class="num">
          <el-card
            v-for="item in dailySales"
            :key="item.name"
            :body-style="{ display: 'flex', padding: 0 }"
          >
            <i
              class="icon"
              :class="`el-icon-${item.icon}`"
              :style="{ background: item.color }"
            ></i>
            <div class="detail">
              <p class="price">{{ item.value }}</p>
              <p class="desc">{{ item.name }}</p>
            </div>
          </el-card>
        </div>
        <el-card style="height: 300px">
          <div ref="echarts1" style="height: 280px"></div>
        </el-card>
        <el-card style="height: 300px; margin-top: 10px">
          <div ref="echarts2" style="height: 280px"></div>
        </el-card>
        <!-- <div class="graph">
          <el-card style="height: 260px">null</el-card>
          <el-card style="height: 260px">null</el-card>
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getTodaySales, recentSales, getAdminName } from "@/api/home";
import { getOrder } from "@/api/warehouseInfo/order";
import * as echarts from "echarts";
export default {
  data() {
    return {
      todaySalesTable: [
        {
          oid: "",
          wid: "",
          status: "",
          prchsNum: "",
          createTime: "",
          prchsUser: "",
          drugName: "",
          drugPrice: "",
          address: "",
        },
      ],
      adminName: "123",
      orderTable: [],
      tableLabel: {
        oid: "订单编号",
        drugName: "药品名",
        prchsUser: "用户名",
        prchsNum: "购买数量",
      },
      dailySales: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
      ],
    };
  },
  mounted() {
    getAdminName().then(({ data }) => {
      this.adminName = data.data;
    });
    getOrder({
      type: -1,
      curPage: 1,
      limit: 10,
      sname: "",
    }).then(({ data }) => {
      this.todaySalesTable = data.data.records;
    });
    getTodaySales().then(({ data }) => {
      this.dailySales = data.data;
    });
    recentSales().then(({ data }) => {
      const echarts1 = echarts.init(this.$refs.echarts1);
      const echarts2 = echarts.init(this.$refs.echarts2);
      const dailySales = data.data;

      const days = dailySales.day;
      const recentSales = dailySales.recentSales;
      const legends = Object.keys(recentSales);

      var echarts1option = {};
      var echarts2option = {};

      echarts1option.xAxis = {
        data: days,
      };
      echarts1option.yAxis = {};
      echarts1option.legend = { data: legends };
      echarts1option.series = [];

      for (var key in recentSales) {
        echarts1option.series.push({
          name: key,
          data: recentSales[key],
          type: "line",
        });
      }

      echarts1option.tooltip = {};
      echarts1option.title = {
        text: "最近销售情况",
      };
      echarts1.setOption(echarts1option);

      echarts2option.xAxis = {
        data: days,
      };
      echarts2option.yAxis = {};
      echarts2option.legend = { data: legends };
      echarts2option.series = [];

      for (var key in recentSales) {
        echarts2option.series.push({
          name: key,
          data: recentSales[key],
          type: "bar",
        });
      }

      echarts2option.tooltip = {};
      echarts2option.title = {
        text: "最近销售情况",
      };
      echarts2.setOption(echarts2option);
    });
  },
};
</script>
<style lang="less" scoped>
.box-card {
  margin-bottom: 10px;
}
.user {
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ccc;
  img {
    margin-right: 40px;
    widows: 150px;
    height: 150px;
    // border-radius: 50%;
  }
  .userinfo {
    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }
    .access {
      color: #999999;
    }
  }
}
.login-info {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999999;
    span {
      color: #666666;
    }
  }
}
.num {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .icon {
    width: 80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: white;
  }
  .detail {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .price {
      font-size: 23px;
      margin-bottom: 10px;
      line-height: 30px;
      height: 30px;
    }
    .desc {
      font-size: 13px;
      color: #333;
    }
  }
  .el-card {
    width: 32%;
    margin-bottom: 20px;
  }
}
.graph {
  display: flex;
  justify-content: space-between;
  .el-card {
    width: 48%;
    margin-top: 20px;
  }
}
</style>
